<template>
  <section class="section collection">

    <div class="container">
<!--      <h2 class="h2 section-title">-->
<!--        <span class="text">全部分类</span>-->
<!--        <span class="line"></span>-->
<!--      </h2>-->
      <ul class="collection-list has-scrollbar">
        <li v-for="col in collections" :key="col.typeName">
          <div class="collection-card" :style="{
            backgroundImage: 'url(' + col.image + ')',
            backgroundPosition: 'center',
            backgroundSize: '50% 50%',
          }">
            <h3 class="h4 card-title">{{ col.typeName }}</h3>

            <div @click="goto(col.typeName)" class="btn btn-secondary">
              <span style="fonr-size: 10px">查看更多</span>
              <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
            </div>
          </div>
        </li>
      </ul>

    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      collections: [{
        typeName: '服装',
        image: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180615/5a51eb88Na4797877.jpg',
      }, {
        typeName: '手机通讯',
        image: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg',
      }, {
        typeName: '男鞋',
        image: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180615/5b19403eN9f0b3cb8.jpg'
      }]
    }
  },
  created() {
    // .get('xicywge').then(res => {
    //   const { data } = res
    //   // data [ { iuhce } ]
    //   data.forEach(d => {
    //     this.collections.push({
    //       typeName: data.cateName,
    //       image: data.url,
    //     })
    //   })
    // })
  },
  methods: {
    goto(typeName) {
      // TODO 跳转到指定分类的商品列表页面

    }
  }
}
</script>

<style>
</style>